Passing CSS custom properties to components

Posted on 2023-06-20 by

henrikvilhelmberglund

There are several methods to add classes to components, such as class="" , class: , props. Here we use props: 

<script>
  import Button from "./Button.svelte";
</script>

<Button buttonColor="red">Red Button</Button>
<Button buttonColor="blue">Blue Button</Button>
<Button buttonColor="yellow" textColor="black">Yellow Button</Button>

<style>
</style>

However maybe we don't want to use props for the CSS, instead using props only for data. What could we do then to provide our CSS?

We could use CSS custom properties . These are custom properties that we can define ourselves like this:

--button-color: red

and then use like this:

var(--button-color)

These custom properties are then inherited and usable by the children of the element where you defined them.

We can also have a fallback if the value is undefined by doing this:

var(--button-color, blue) 

<script>
	import Button2 from "./Button2.svelte";
</script>

<!-- we can wrap our component in an element and define our custom property there and our component will inherit it -->
<div style="--button-color: red;">
	<Button2 buttonColor="red">Red Button</Button2>
</div>
<Button2 buttonColor="blue">Blue Button</Button2>
<div style="--button-color: yellow;">
	<Button2 buttonColor="yellow" textColor="black">Yellow Button</Button2>
</div>

<style>
</style>

Let's try without any props at all. 

<script>
	import Button3 from "./Button3.svelte";
</script>

<!-- we can wrap our component in an element and define our custom property there and our component will inherit it -->
<div style="--button-color: red;">
	<Button3>Red Button</Button3>
</div>
<Button3>Blue Button</Button3>
<div style="--button-color: yellow; --text-color: black">
	<Button3>Yellow Button</Button3>
</div>

<style>
</style>

We may not want to wrap the buttons with div tags though because they're now block instead of inline. This could cause problems with our layout if we use something like grid.

Here our pink buttons end up together which is not really what we want.
<script>
	import Button4 from "./Button4.svelte";
</script>

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
	<Button4>Red Button</Button4>
	<Button4>Blue Button</Button4>
	<span style="--button-color: hotpink;">
		<Button4>Yellow Button</Button4>
		<Button4>Red Button</Button4>
	</span>
	<Button4>Blue Button</Button4>
	<Button4>Yellow Button</Button4>
</div>

<style>
</style>

To avoid this issue we can use the CSS display property content .

display: content;

This will make sure that it is not treated as a part of the layout.

By adding display: contents; to our wrapping elements we can still use the grid perfectly fine.
<script>
	import Button5 from "./Button5.svelte";
</script>

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
	<Button5>Red Button</Button5>
	<Button5>Blue Button</Button5>
	<span style="display: contents; --button-color: hotpink;">
		<Button5>Yellow Button</Button5>
		<Button5>Red Button</Button5>
	</span>
	<Button5>Blue Button</Button5>
	<Button5>Yellow Button</Button5>
</div>

<style>
</style>

Of course, this being Svelte, we can do something nicer still. By adding the CSS custom properties as props in the component, they will be automatically wrapped in a display: contents div .

Notice the prop in the pink Button components. If you inspect the pink buttons you can see that they have been wrapped in new divs that don't break the layout.
<script>
	import Button6 from "./Button6.svelte";
</script>

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
	<Button6>Red Button</Button6>
	<Button6>Blue Button</Button6>

	<Button6 --button-color="hotpink" --text-color="blue">Yellow Button</Button6>
	<Button6 --button-color="hotpink" --text-color="slateblue">Red Button</Button6>

	<Button6>Blue Button</Button6>
	<Button6>Yellow Button</Button6>
</div>

<style>
</style>